<template>
  <div id="about">
    <div class="top">
      <div class="introduce">
        <div class="introduce_content isNight">
          <h1>关于作者</h1>
          <div class="introduce_left">
            <p>
              作者可懒可懒了...<br/>
              兴趣: <br/>
              吃吃吃吃吃吃... <br/>
              睡睡睡睡睡睡... <br/>
            </p>
            <h3>赞赏</h3>
            <div class="shang">
              <img src="@/assets/img/zfb.jpg">
              <img src="@/assets/img/wx.jpg">
            </div>
          </div>
        </div>
      </div>
      <div class="box">
        <h1>数量统计</h1>
        <!--每日发布-->
        <div id="calendar"></div>
        <!--发布统计-->
        <div id="release"></div>
        <!--分类统计-->
        <div id="classify"></div>
      </div>
    </div>
    <div class="ulBox">
      <!-- <ul class="ulBox_left">
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
      </ul>
      <div class="ulBox_right">
        smxkl
      </div> -->
    </div>
    <!--个人简介,合并到小羊组件中-->
    <!-- 小羊 -->
    <sheep></sheep>
  </div>
</template>

<script>
  import sheep from '@/components/game/Sheep.vue'
  export default{
    components: {
      sheep
    },
    data(){
      return {
        //日历配置
        calendarOptions:{
          tooltip: {
              position: 'top',
              formatter: function (params, ticket, callback) {
                  var showHtm=params.data[0] + ' : ' + params.data[1]
                  return showHtm;
              }
          },
          animation:false,
          visualMap: [{
            show: false,
            min: 0,
            max: 100,
          },{
            pieces:[
              {min:21,color:'#4169E1'},
              {min:11,max:20,color:'#00CED1'},
              {min:6,max:10,color:'#87CEFA'},
              {min:2,max:5,color:'#ADD8E6'},
              {min:1,max:1,color:'#E0FFFF'}
            ],
            show:false
          }],
          calendar: {
            range: ''
          },
          series: {
            type: 'heatmap',
            coordinateSystem: 'calendar',
            data:[],
            // label:{
            //   show:true,
            //   position:'top'
            // }
          }
        },
        //分类统计
        releaseOption:{
          backgroundColor: 'white',
          visualMap: {
              show: false,
              min: 80,
              max: 600,
              inRange: {
                  colorLightness: [0, 1]
              }
          },
          series :{
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            roseType: 'angle',
            label: {
              //必须先声明,否则不是响应式的
              textStyle: { //文本颜色
                  color: 'black'
              }             
            },
            labelLine: {
              lineStyle: { //线条颜色
                  color: 'black'
              }                
            }
          }
          
        },
        //标签统计
        tagsOption:{
          backgroundColor: 'white',
          visualMap: {
              show: false,
              min: 80,
              max: 600,
              inRange: {
                  colorLightness: [0, 1]
              }
          },
          series :{
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            roseType: 'angle',
            label: {
              textStyle: {
                  color: 'black'
              }
            },
            labelLine: {
              lineStyle: {
                  color: 'black'
              }
            }
          }
          
        },
        colors:['#4169E1','#00CED1','#87CEFA','#ADD8E6',
                     '#E0FFFF'] ,   
        types:[],
        tags:[]
      }
    },
    mounted(){   
      // 1.每日发布
      this.initDayCounts()
      // 2.发布统计
      this.initTypesCount()
      // 3.分类统计
      this.initTagsCount() 
    },
    methods:{
      //每日发布的数据
      async initDayCounts(){
        var myChart1 = this.echarts.init(document.getElementById('calendar'))
        this.calendarOptions.calendar.range = new Date().getFullYear()
        //TODO获取数据
        this.calendarOptions.series.data = await this.getDayCounts()
        myChart1.setOption(this.calendarOptions)
      },
      async getDayCounts(){
          let temp = []
          const {data:res} = await this.$http.get('/blog/blogs/time/count',{
            params:{
              year:new Date().getFullYear()
            }
          })  
          for(let i = 0; i < res.data.length; i++){
            temp.push([res.data[i].time.slice(0,10),res.data[i].number])
          }
          return temp  
      },
      //获取分类
      async getTypes(){
        const {data:res} = await this.$http.get('/blog/type/list')
        this.types = res.data
        console.log(this.types)
      },
      //获取标签
      async getTags(){
        const {data:res} = await this.$http.get('/blog/tag/list')
        this.tags = res.data
        console.log(this.tags)
      },
      // 获取分类数据
      async initTypesCount(){
        var myChart2 = this.echarts.init(document.getElementById('release'))
        await this.getTypes()
        //如果现在是晚上就把背景颜色设置为292929
        let hour = new Date().getHours()
        if(hour > 6 && hour < 18){
          this.releaseOption.backgroundColor="white"
          this.releaseOption.series.label.textStyle.color="black"
          this.releaseOption.series.labelLine.lineStyle="black"
        }else{
          this.releaseOption.backgroundColor="#292929"
          this.releaseOption.series.label.textStyle.color="white"
          this.releaseOption.series.labelLine.lineStyle.color="white"
        }        
        this.releaseOption.series.data = await this.getTypesCount()
        myChart2.setOption(this.releaseOption)
      },
      async getTypesCount(){
        let tempData = []
        for(let i = 0; i < this.types.length; i++){
          const {data:res} = await this.$http.get('/blog/type/blogcount',{
            params:{
              id:this.types[i].id
            }
          })  
          //只有数量>0才需要显示
          if(res.count  > 0){
            let temp = {}
            temp.value = res.count 
            temp.name = this.types[i].name
            temp.itemStyle = {
                color:this.colors[Math.floor(i % 5)]
            }
            tempData.push(temp)
          }
        }
        console.log(tempData)
        return tempData
      },
      // 获取标签数据
      async initTagsCount(){
        var myChart3 = this.echarts.init(document.getElementById('classify'))
        //TODO获取数据
        await this.getTags()
        //如果现在是晚上就把背景颜色设置为292929
        let hour = new Date().getHours()
        if(hour > 6 && hour < 18){
          this.tagsOption.backgroundColor="white"
          this.tagsOption.series.label.textStyle.color="black"
          this.tagsOption.series.labelLine.lineStyle="black"
        }else{
          this.tagsOption.backgroundColor="#292929"
          this.tagsOption.series.label.textStyle.color="white"
          this.tagsOption.series.labelLine.lineStyle.color="white"
        }  
        this.tagsOption.series.data = await this.getTagsCount()
        myChart3.setOption(this.tagsOption)
      },
      async getTagsCount(){
        let tempData = []
        for(let i = 0; i < this.tags.length; i++){
          const {data:res} = await this.$http.get('/blog/tag/blogcount',{
            params:{
              id:this.tags[i].id
            }
          })  
          //只有数量>0才需要显示
          if(res.count > 0){
            let temp = {}
            temp.value = res.count 
            temp.name = this.tags[i].name
            temp.itemStyle = {
              color:this.colors[Math.floor(i % 5)]
            }
            tempData.push(temp)
          }
        }
        console.log(tempData)
        return tempData
      },
    }
  }
</script>

<style scoped>
  .isNight{
    background-color: #212121 !important;
  }
  #about{
    margin-left:20px;
    margin-top:20px;
  }
  .top{
    box-sizing: border-box;
    width:100%;
    position: relative;
  }
  .top .box{
    position:absolute;
    top:0;
    left:750px;
    width:calc(100% - 750px);
  }
/* 关于作者 */
  .introduce{
    height:500px;
    width:500px;
    border: 1px solid #ccc;
    position: relative;
    background-color: #336699
  }
  .introduce_content{
    height:500px;
    width:650px;
    position: absolute;
    left:80px;
    top:90px;
    border: 1px solid #ccc;
    background-color: white;
  }
  .introduce_left{
    position: relative;
    height:100%;
    width:600px;
  }
  .introduce_left p{
    padding-left: 70px;
    padding-top: 50px;
    font-size:18px;
  }
  .introduce_left h3{
    position: absolute;
    left:50px;
    bottom:200px;
  }
  .introduce_content h1{
   float:right;
   width:40px;
   height:100%;
   padding-right:20px;
   padding-top:20px;
  }
  .introduce_content .shang{
    width:100%;
    height:250px;
    position: absolute;
    left:0;
    bottom:0;
  }
  .introduce_content .shang img{
    display:inline-block;
    width:160px;
    height:160px;
    border:1px solid #ccc;
    position: absolute;
    top:50px;
    border-radius:8px;
  }
  .introduce_content .shang img:nth-child(1){
    left:100px;
  }
  .introduce_content .shang img:nth-child(2){
    left:300px;
  }
  .box h1{
    margin-left:100px;
  }
  .ulBox{
    height:160px;
    /* height:500px; */
    width:100%;
    overflow:hidden;
  }
  .ulBox ul {
    margin-top:140px;
    width:300px;
    height:300px;
    display: block;
    overflow: hidden;
  }
  .ulBox ul li {
    border: 1px solid #ccc;
    float:left;
    width: 90px;
    line-height: 74px;
    height: 74px;
    margin-right: 2px;
    margin-bottom: 2px;
    text-align:center;
  }
  .ulBox_left{
    float:left;
  }
  .ulBox_right{
    box-sizing: border-box;
    margin-top:140px;
    float:right;
    height:300px;
    width:calc(100% - 300px);
    border: 1px solid #ccc;
  }
  /*echart中的样式*/
  .box{
    overflow:hidden;
  }
  #calendar{
    height:200px;
    width:100%;
  }
  #release{
    margin-top:50px;
    height:200px;
    width:40%;
    float:left;
  }
  #classify{
    margin-top:50px;
    height:200px;
    width:40%;
    float:left;
  }
</style>
